import { reqLogin } from "@/api/user";

/*
  问题 ：登录成功跳转到首页 但是刷新Vuex中的state数据（name，token）又没有了 应该是用户登录成功后刷新还是有用户数据的
  解决 ：使用 localStorage 持久化存储用户数据
    1.在请求登录成功后把数据更新在Vuex中 和 永久储存 localStorage
    2.去本地储存读取 如果有数据用户登录了 没有数据用户没登录
    3.用户登录页面显示用户名（store.tate.name） 用户没登录显示要登录

    刷新Vuex中的数据会没了 但是localStorage和sessionStorage的数据还会在
    localStorage 永久储存 硬盘读取
    sessionStorage 会话储存 关闭页面数据就没了 硬盘读取
    store.state  内存读取 多处要读取考虑用 性能相对好 
*/

//  初始化读取数据 用户上来读取本地储存的user的name和token 有代表用户登录了  没有初始值就是'' 代表没登录
const user = JSON.parse(localStorage.getItem("user")) || {
  name: "", // 用户名
  token: "", // 用户的唯一标识
};
export default {
  state: {
    name: user.name, // 用户名
    token: user.token, // 用户的唯一标识
  },
  getters: {},
  actions: {
    async login({ commit }, { phone, password }) {
      const res = await reqLogin(phone, password);
      //  触发mutation函数 把请求的结果传给mutation
      commit("LOGIN", res);
    },
  },
  mutations: {
    LOGIN(state, { name, token }) {
      // 直接修改 state的数据
      state.name = name;
      state.token = token;
      // 登录成功，把user的name和token 永久储存 localStorage
      localStorage.setItem("user", JSON.stringify({ name, token }));
    },
    RESET(state) {
      // 重置清空store的数据
      state.name = "";
      state.token = "";
      // 也要清除本地储存的数据
      localStorage.removeItem('user')
    },
  },
  namespaced: true,
};
